<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>商品详情</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<include file="public/comm" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav fs_xl">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left fs_xxi"></a>
		    <h1 class="mui-title fs_xl">商品详情</h1>
		</header>
		<div class="fs_xl mui-content act_m shop">
			<div class="one_info">
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<foreach name="goods_images_list" item="vo" key="k">
							<div class="swiper-slide">
								<a href="#"><img src="{$vo.image_url}" /></a>
							</div>
						</foreach>
					</div>
					<div class="pagination"></div>
				</div>
			</div>
			<div class="shop_info">
				<p class="fs_l">{$goods.goods_name}</p>
				<p class="fs_xs"><i class="mui-icon iconfont icon-huangye_dianpumingcheng fs_xl"></i><em>{$goods.originname}</em></p>
				<p class="fs_m">
					<foreach name="goods.cellartheme" item='v' key='kk'><span class="span1 fs_xxs">{$v.title}</span></foreach>
					<foreach name="goods.aroma" item='v' key='kk'><span class="span2 fs_xxs">{$v.title}</span></foreach>	
				</p>
				<p class="fs_m"><span class="span3 fs_xl" id="goods_price" >¥{$goods.shop_price}</span><span class="span4 fs_xxs"><if $goods.goods_id==15>{$goods.sales_sum+50}<else>{$goods.sales_sum}</else></if>坛 已售</span></p>
				<if $goods.deduction_amount != 0>
				<p class="manjian fs_xs"><span>满减</span>每满<em>{$goods.shop_price}</em>元，可减<em>{$goods.deduction_amount}</em>元现金</p>	
				</if>
				<if $goods.give_integral != 0>
				<p class="zengsong fs_xs"><span>赠送</span>完成评价并晒单再赠送{$goods.give_integral}银酒币</p>	
				</if>
			</div>
			<div class="shop_xz">
				 <a class="fs_l cls"><em>请选择</em><span id="tzgg">坛装规格</span><span id="gmfs">购买方式</span><i class="mui-icon mui-icon-arrowright fs_xxxl"></i></a>
			</div>
			<div class="shop_js">
				<div class="shop_xz_top fs_xl cls">
					<ul>
						<li class="active">图文详情</li>
						<li>商品参数</li>
						<li>评论</li>
					</ul>
				</div>
				<div class="shop_m_box">
					<div class="shop_js_m active">
						{$goods.goods_content|htmlspecialchars_decode}
					</div>
					<div class="shop_js_m canshu">
						<p>品牌<span>{$goods.brand_name}</span></p>
						<p>香型<foreach name="goods.aroma" item='v' key='kk'><span>{$v.title}</span></foreach></p>
						<p>酒精度<span>{$goods.degree}°</span></p>
						<p>主题<foreach name="goods.cellartheme" item='v' key='kk'><span>{$v.title}</span></foreach></p>
						<p>窖藏方式<foreach name="goods.cellartype" item='v' key='kk'><span>{$v.title}</span></foreach></p>
						<p>产地<span>{$goods.originname}</span></p>
						<p>厂名<span>{$goods.suppliers_name}</span></p>
						<p>厂址<span>{$goods.suppliers_address}</span></p>
						<p>生产许可证号<span>{$goods.licence_code}</span></p>
					</div>
					<div class="shop_js_m">
						<div class="one_pl">
		    			<ul>
							<volist name="comment_list" id="vo">
								<li>
									<div class="pl_tit">
										<span class="pl_tx"><img src="{$vo.head_pic}" /></span>
										<span class="pl_name fs_m">{$vo.username}</span>
										<span class="pl_time fs_xs">{$vo.add_time|date="y-m-d",###}</span>
									</div>
									<div class="pl_info">
										<p class="fs_xs">{$vo.content|htmlspecialchars_decode}</p>
										<p class="cls">
											<volist name="vo.img" id="voo">
												<span><img src="{$voo}" /></span>
											</volist>
										</p>
									</div>
								</li>
							</volist>
						</ul>
						<p style="text-align:center;padding-top:0.5em;"><a class="fs_s" href="{:U('Mobile/Goods/goods_comment',array('id'=>$vo.goods_id))}">查看更多评论</a></p>
		    			</div>
					</div>
				</div>				
			</div>
		</div>
		<div class="shop_gwc fs_xl">
			<a class="kf" target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=526895676&site=qq&menu=yes">
				<p class="mui-icon iconfont icon-kefu fs_i"></p>
				<p class="fs_s">客服</p>
			</a>
			<a class="dp" href="{:U('Mobile/Cellar/factoryInfo',array('id'=>$goods.suppliers_id))}">
				<p class="mui-icon iconfont icon-dianpu fs_i"></p>
				<p class="fs_s">店铺</p>
			</a>
			<a class="btn1 fs_m" onclick="checkaddForm({$goods.goods_id},1,0)">加入购物车</a>
			<a class="btn2 fs_m" onclick="checkaddForm({$goods.goods_id},1,1)">购买&预定</a>
		</div>
		<div class="shop_list">
			<div class="shop_close mui-icon mui-icon-closeempty"></div>
			<div class="sp_list_top cls">
				<div class="sp_img">
					<img src="{$goods.suppliers_logo}" />
				</div>
				<div class="sp_gg">
					<p><span class="span1 fs_xl">¥<span class="sh_jg"  id="goods_price1">{$goods.shop_price}</span></span><span class="span2 fs_m">{$goods.sale_num}单 已售</span></p>
					<p class="fs_l">请选择  坛装规格   购买方式</p>
				</div>
			</div>
			<form id="buy_goods_form">
			<div class="sp_m_info">
				<div class="sp_gm_gg">
					<p class="fs_l">购买规格<span class="fs_m">（根据坛装容量规格起购,1L=1000ml）</span></p>
					<ul class="fs_m cls">
						<foreach name="quantity" item="vo" key="k">
							<li data-pay="{$vo.val}"  price="{$vo.price}" <if $k==0>class='active'</if>>{$vo.val}L/坛</li>
						</foreach>
						<input type="hidden" name="goods_spec[other_content][capacity]" value="{$vo.val}L/坛">
					</ul>
				</div>
				<div class="sp_gm_sl">
					<p class="fs_l">购买数量<span>（单位:坛）</span></p>
					<div class="mui-numbox" data-numbox-min='1' style="margin-top: 0.5em;margin-left: 0.6em;">
						<button id="btn2" class="mui-btn mui-btn-numbox-minus" type="button">-</button>
						<input id="box" class="mui-input-numbox" type="number" name="goods_num" value="1" />
						<button id="btn1" class="mui-btn mui-btn-numbox-plus" type="button">+</button>
					</div>
				</div>
				<div class="sp_gm_fs">
					<p class="fs_l">购买方式</p>
					<ul>
						<input type="hidden" name="goods_spec[other_content][buy_type]" value="">
						<li data-fs="1">立即发货</li>
						<li data-fs="2" id="yy_cj">预约藏酒</li>						
					</ul>
				</div>
				<div class="yy_cj">
					<div class="hx"></div>
					<p class="fs_l">请选择藏酒方式</p>
					<div class="yy_fs fs_m cls">
						<a data-cj="2" class="active">委托藏酒<i class="mui-icon mui-icon-checkmarkempty fs_xxi"></i></a>
						<a data-cj="1" class="" id="yy_dc">预约体验藏酒</a>
						<input type="hidden" name="goods_spec[other_content][cellar_type]" value="1" />
					</div>
					<div class="yy_dc">
						<a>体验基地正在建设中...</a>
<!-- 					<a>体验藏酒时间：<span class="yy_dc_t"><input type="text" name="goods_spec[other_content][yy_time]" /></span></a> -->
<!-- 					<a>体验藏酒人数：<span><input type="number" value="1" name="goods_spec[other_content][yy_num]" /></span></a> -->
<!-- 					<input type="hidden" class="yy_time_1" name="goods_spec[other_content][yy_time]" value="" /> -->
					</div>
					<div class="yy_time">
						<p>请选择藏酒期限<em>（¥{$goods.custodian_fee}/L/年）</em></p>
						<div class="mui-numbox" data-numbox-min='3'>
							<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
							<input id="test" class="mui-input-numbox" type="number" value="3" name="goods_spec[other_content][cellar_years]" />
							<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
						</div>
						<span class="fs_xs">*至少藏酒三年才有老酒的味道哦!</span>
					</div>
					<div class="cj_gz" style="line-height: 1.8em;">
						<p class="fs_xl">特别提醒：</p>
						<p class="fs_xs" style="color: #333;padding: 0 0.5em !important;">1、暂未开通到酒厂藏酒功能，只能在平台运营的体验藏酒区藏酒，后期将逐步开通各个原产地酒厂到厂藏酒。</p>
						<p class="fs_xs" style="color: #333;padding: 0 0.5em !important;">2、请填写体验藏酒预约时间和人数，平台会安排工作人员进行接待。</p>
					</div>
				</div>
			</div>
			<input type="hidden" name="goods_id" value="{$goods.goods_id}" />
			<input type="hidden" name="goods_spec[酒精度]" value="{$goods.degree}°" />
			<input type="hidden" name="goods_spec[香型]" value="{$aromaname}" />
			<input type="hidden" name="goods_spec[规格]" id="capacity1"  value="{$quantity[0]['val']}L/坛" />
			<input type="hidden" name="goods_spec[other_content][price1]" id="price1" value="">
			<div class="sp_pay">
				<a class="pay fs_xxxl">¥<em id="pay">0</em></a>
			</div>
			<div class="sp_gm_btn">
				<a class="sp_res">确定</a>
			</div>
			</form>
		</div>
		<a class="gwc_xf fs_xl" href="{:U('Cart/cart')}"><img src="__STATIC__/images/gwc021211.png" /></a>
		<script type="text/javascript">
			mui.init();
			$(".device,.swiper-container").height($(".swiper-slide img").height());
			$(".swiper-container1").height($(".swiper-slide").height());
			$(window).resize(function() {
				$(".device,.swiper-container").height($(".swiper-slide img").height());
				$(".swiper-container1").height($(".swiper-slide").height());
			});
			var mySwiper = new Swiper('.swiper-container', {
				pagination: '.pagination',
				loop: true,
				autoplay : 5000,
				grabCursor: true,
				autoplayDisableOnInteraction : false,
				paginationClickable: true
			});
			function pay_g(){
				var pay=parseInt($(".sh_jg").text()); 
    			var guig=parseInt($(".sp_gm_gg .active").attr("data-pay"));
    			var sum=pay*guig;
    			$("#pay").text(sum);
			}
			//检查必选项是否已选择
			function checkaddForm(goods_id,num,to_catr){
				 $.ajax({
		            type : "POST",
		            url:"/index.php?m=Mobile&c=Cart&a=ajaxAddCart",
		            data : $('#buy_goods_form').serialize(),
					dataType:'json',
		            success: function(data){
		              if(data.status != 1){
		              	layer.alert(data.msg,1);
						$(".shop_list").show();
		              }else{
		              	//AjaxAddCart(goods_id,num,to_catr);
		                if(to_catr == 1){
		                	location.href = "http://www.fengtantianxia.com/Mobile/Cart/cart";
		                }
		                else{
		                	layer.alert('成功加入购物车！',1);
		                }
		              }
		            }
		         });
			}
			$(function(){
				$(".shop_xz_top li").click(function () {
        			$(".shop_xz_top li").removeClass("active").eq($(".shop_xz_top li").index(this)).addClass("active");
        			$(".shop_js_m").hide().eq($('.shop_xz_top li').index(this)).show();
    			});
    			$(".shop_xz").click(function(){
    				$(".shop_list").show();
    			});
    			$(".shop_close, .sp_res").click(function(){
    				$(".shop_list").hide();
    				var yy_time= $(".yy_dc_t").text();
					$(".yy_time_1").val(yy_time);
    			});   			
    			$(".sp_gm_gg li").on('tap',function(){
    				$("#goods_price").text("￥"+$(this).attr("price"));
    				$("#goods_price1").text($(this).attr("price"));
    				$("#capacity1").val($(this).text());
    				$("#price1").val($(this).attr("price"));
    				var gg_p=$(this).text();
    				$(this).siblings().val(gg_p);
    				var aa=document.getElementById("box").value;
    				$(this).addClass("active").siblings().removeClass("active");
    				var text1=$(".sp_gm_gg .active").text();
    				$("#tzgg").text(text1);
    				$(".shop_xz em").text("已选择");
    				var pay=parseInt($(".sh_jg").text()); 
    				var guig=parseInt($(".sp_gm_gg .active").attr("data-pay"));
					var sum=pay*guig*aa;
					$("#pay").text(sum);
    			});
    			$(".sp_gm_fs li").click(function(){
    				var gm_f=$(this).attr('data-fs');
    				$(this).siblings().val(gm_f);
    				$(this).addClass("active").siblings().removeClass("active");
    				var text2=$(".sp_gm_fs .active").text();
    				$(".shop_xz em").text("已选择");
    				$("#gmfs").text(text2);
    			});
    			
    			//计算价格
                $("#box").change(function(){
			    	var num = $("#box").val();
			    	var pay = parseInt($(".sh_jg").text());
			    	var guig=parseInt($(".sp_gm_gg .active").attr("data-pay"));
			    	var sum=pay*guig*num;
					$("#pay").text(sum);
			    });
    			document.getElementById("btn1").addEventListener('tap', function(event){
					if($(".sp_gm_gg .active").length<=0){
						return false;
					}else{
						$(".sp_gm_sl").css("pointer-events","auto");
					}
				});
    			document.getElementById("btn2").addEventListener('tap', function(event){
					if($(".sp_gm_gg .active").length<=0){
						return false;
					}else{
						$(".sp_gm_sl").css("pointer-events","auto");
					}
				});
			})
		</script>
		<script>
			$(function(){
				$("#yy_cj").click(function(){
					$(".yy_cj").show();
					$("#yy_cj").css({"border-bottom-left-radius":"initial","border-bottom-right-radius":"initial","border-bottom":"solid 1px #fff"});
				});
				$("#yy_cj").siblings().click(function(){
					$(".yy_cj").hide();
				});
				$(".yy_fs a").click(function(){
					if($(this).find("i").length<=0){
						$(this).addClass("active").siblings().removeClass("active");
						$(this).append('<i class="mui-icon mui-icon-checkmarkempty fs_xxi"></i>');
						$(this).siblings().find("i").remove();
						var cj_fs=$(this).attr("data-cj");
						$(this).siblings().val(cj_fs);
					}
				});
				$("#yy_dc").click(function(){
					$(".yy_dc").show();
				});
				$("#yy_dc").siblings().click(function(){
					$(".yy_dc").hide();
				});
			})
		</script>
		<script>
			(function($) {
				$.init();
				var result = $('.yy_dc_t')[0];
				var btns = $('.yy_dc_t');
				btns.each(function(i, btn) {
					btn.addEventListener('tap', function() {
						var optionsJson = this.getAttribute('data-options') || '{}';
						var options = JSON.parse(optionsJson);
						var id = this.getAttribute('id');
						/*
						 * 首次显示时实例化组件
						 * 示例为了简洁，将 options 放在了按钮的 dom 上
						 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
						 */
						var picker = new $.DtPicker(options);
						picker.show(function(rs) {
							/*
							 * rs.value 拼合后的 value
							 * rs.text 拼合后的 text
							 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
							 * rs.m 月，用法同年
							 * rs.d 日，用法同年
							 * rs.h 时，用法同年
							 * rs.i 分（minutes 的第二个字母），用法同年
							 */
							result.innerText = rs.text;
							/* 
							 * 返回 false 可以阻止选择框的关闭
							 * return false;
							 */
							/*
							 * 释放组件资源，释放后将将不能再操作组件
							 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
							 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
							 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
							 */
							picker.dispose();
						});
					}, false);
				});
			})(mui);
		</script>
	</body>

</html>